<style>
    .img-wp {
        width: 765px;
        margin: 0 auto;
    }
</style>

<div class="img-wp">
    <img data-src="/img/lazy/1.jpg" alt="" width="765" height="574">
    <img data-src="/img/lazy/2.jpg" alt="" width="765" height="574">
    <img data-src="/img/lazy/3.jpg" alt="" width="765" height="574">
    <img data-src="/img/lazy/4.jpg" alt="" width="765" height="574">
    <img data-src="/img/lazy/5.jpg" alt="" width="765" height="574">
    <img data-src="/img/lazy/6.jpg" alt="" width="765" height="574">
</div>

<script>
    ! function(window, document, $, undefined) {
        function lazyScroll() {
            $('img').each(function(index, item) {
                let bTop = $(this).offset().top;
                let scrollHeight = $(':root').scrollTop()
                let screenHeight = window.innerHeight;
                if ((scrollHeight + screenHeight) > bTop) {
                    $(this).attr('src', $(this).data('src'))
                }
            })
        }
        lazyScroll()
        $(window).on('scroll', lazyScroll)
    }(window, document, jQuery)
</script>